<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Excel Reader and Exporter</title>
    <!-- 引入 ElementPlus 的 CSS 文件 -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus@2.3.6/dist/index.css">
</head>

<body>
    <div id="app">
        <el-card>
            <template #header>
                <h1>Excel Reader and Exporter</h1>
            </template>
            <el-form :model="form" enctype="multipart/form-data">
                <el-form-item>
                    <el-upload
                        ref="uploadRef"
                        action="http://localhost:3000/upload"
                        :show-file-list="false"
                        :before-upload="beforeUpload"
                        :on-success="handleUploadSuccess"
                        :on-error="handleUploadError"
                        name="excelFile">
                        <el-button size="small" type="primary">Select Excel File</el-button>
                    </el-upload>
                </el-form-item>
            </el-form>
            <el-button @click="downloadExcel" size="small" type="primary">Download Excel</el-button>
            <pre>{{ outputData }}</pre>
        </el-card>
    </div>

    <!-- 引入 Vue 3 和 ElementPlus 的 JavaScript 文件 -->
    <script src="https://unpkg.com/vue@3.3.4/dist/vue.global.prod.js"></script>
    <script src="https://unpkg.com/element-plus@2.3.6/dist/index.full.min.js"></script>
    <script>
        const { createApp, ref } = Vue;
        const { ipcRenderer } = require('electron');

        const app = createApp({
            setup() {
                const uploadRef = ref(null);
                const outputData = ref('');

                const beforeUpload = (file) => {
                    const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
                    if (!isExcel) {
                        ElMessage.error('Please select an Excel file');
                    }
                    return isExcel;
                };

                const handleUploadSuccess = (response, file, fileList) => {
                    outputData.value = JSON.stringify(response, null, 2);
                    ElMessage.success('File uploaded successfully');
                };

                const handleUploadError = (error, file, fileList) => {
                    ElMessage.error('File upload failed');
                };

                const downloadExcel = async () => {
                    const filePath = await ipcRenderer.invoke('show-save-dialog');
                    if (filePath) {
                        const response = await fetch('http://localhost:3000/download');
                        const blob = await response.blob();
                        const reader = new FileReader();
                        reader.onloadend = () => {
                            const buffer = Buffer.from(reader.result);
                            const fs = require('fs');
                            fs.writeFile(filePath, buffer, (err) => {
                                if (err) {
                                    ElMessage.error('File save failed');
                                } else {
                                    ElMessage.success('File saved successfully');
                                }
                            });
                        };
                        reader.readAsArrayBuffer(blob);
                    } else {
                        ElMessage.info('File save cancelled');
                    }
                };

                return {
                    uploadRef,
                    outputData,
                    beforeUpload,
                    handleUploadSuccess,
                    handleUploadError,
                    downloadExcel
                };
            }
        });

        app.use(ElementPlus);
        app.mount('#app');
    </script>
</body>

</html>
    